@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

$hd: 2;
$color-brand: #4e9ae6;
$color-brand-light: lighten($color-brand, 10%);
$color-brand-dark: darken($color-brand, 10%);
$color-brand-active: #4ECBE6;

$color-bg-base: #f1f4f4;

$color-text-secondary: #fde620;

$border-radius-sm: 6px * $hd;
$border-radius-md: 12px * $hd;
$border-radius-lg: 16px * $hd;

@import "~taro-ui/dist/style/index.scss";
@import "~font-awesome/scss/font-awesome.scss";

@layer base {
  html, body, page {
    background-color: $color-bg-base;

    --color-primary: #{$color-brand};
    --color-primary-light: #{$color-brand-light};
    --color-primary-active: #{$color-brand-active};
    --color-secondary: #{$color-text-secondary};
    --color-white: #{$color-white};
    --color-black: #{$color-black-0};
    --color-background: #{$color-bg-base};
    --color-shadow: #{$color-grey-4};
  }
}

.at {
  &-card {
    @apply border-0 shadow-2xl shadow-shadow overflow-hidden;

    &__header {
      @apply border-b-0 p-0;
    }

    &__content {
      @apply p-0;
    }
  }
}
